<template>
  <a-spin :spinning="confirmLoading">
    <a-form class="antd-modal-form" ref="formRef" :model="formState" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-item label="文本" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.name">
            <a-input v-model:value="formState.name" placeholder="请输入文本" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="密码" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.miMa">
            <a-input-password v-model:value="formState.miMa" placeholder="请输入密码" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="字典下拉" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.xiala">
            <JDictSelectTag type="select" v-model:value="formState.xiala" dictCode="sex" placeholder="请选择字典下拉" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="字典单选" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.danxuan">
            <JDictSelectTag type="radio" v-model:value="formState.danxuan" dictCode="sex" placeholder="请选择字典单选" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="字典多选" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.duoxuan">
            <MyCheckbox v-model:value="formState.duoxuan" dictCode="urgent_level" placeholder="请选择字典多选" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="开关" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.kaiguan">
            <JSwitch v-model:value="formState.kaiguan" :options="['1', '0']" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.riqi">
            <a-date-picker placeholder="请选择日期" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-model:value="formState.riqi" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="年月日时分秒" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.nyrsfm">
            <a-date-picker show-time v-model:value="formState.nyrsfm" style="width: 100%" valueFormat="YYYY-MM-DD HH:mm:ss" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.shijian">
            <TimePicker placeholder="请选择时间" v-model:value="formState.shijian" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="文件" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.wenjian">
            <JUpload v-model:value="formState.wenjian" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="图片" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.tupian">
            <MyImageUpload :fileMax="2" v-model:value="formState.tupian" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="多行文本框" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.dhwb">
            <a-textarea v-model:value="formState.dhwb" rows="4" placeholder="请输入多行文本框" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="字典表下拉搜索框" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.xlss">
            <JSearchSelect v-model:value="formState.xlss" dict="sys_user,realname,username" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="popup弹窗" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.popup">
            <JPopup
              v-model:value="formState.popup"
              :fieldConfig="[
                { source: 'name', target: 'popup' },
                { source: 'id', target: 'popback' },
              ]"
              code="report_user"
              :multi="true"
              :setFieldsValue="setFieldsValue"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="popback" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.popback">
            <a-input v-model:value="formState.popback" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="分类字典树" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.flzds">
            <JCategorySelect
              @change="(value) => handleFormChange('flzds', value)"
              v-model:value="formState.flzds"
              pcode="B02"
              placeholder="请选择分类字典树"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="部门选择" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.bmxz">
            <MySelectDept v-model:value="formState.bmxz" :multi="true" type="array" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="用户选择" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yhxz">
            <JSelectUserByDept v-model:value="formState.yhxz" :multi="true" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="富文本" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.fwb">
            <!-- <JEditor v-model:value="formState.fwb" /> -->
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="markdown" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.markdownString">
            <JMarkdownEditor v-model:value="formState.markdownString" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="省市区JAreaSelect" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.shq">
            <JAreaSelect v-model:value="formState.shq" placeholder="请输入省市区" />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="省市区JAreaLinkage" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jssq">
            <JAreaLinkage v-model:value="formState.jssq" placeholder="请输入省市区" />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="JInputPop" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.ldzje">
            <JInputPop v-model:value="formState.ldzje" placeholder="请输入JInputPop" @change="(value) => handleFormChange('ldzje', value)" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="JSelectInput" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.ldzjs">
            <JSelectInput
              v-model:value="formState.ldzjs"
              placeholder="请选择JSelectInput"
              :options="ldzjsOptions"
              @change="(value) => handleFormChange('ldzjs', value)"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="下拉多选" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zddtjxl">
            <JSelectMultiple v-model:value="formState.zddtjxl" placeholder="请选择下拉多选" dictCode="sex" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="用户" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yongHu">
            <JSelectUser v-model:value="formState.yongHu" placeholder="请选择用户" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zhiWu">
            <JSelectPosition v-model:value="formState.zhiWu" placeholder="请选择职务" @change="(value) => handleFormChange('zhiWu', value)" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="角色" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jueSe">
            <JSelectRole v-model:value="formState.jueSe" placeholder="请选择角色" @change="(value) => handleFormChange('jueSe', value)" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="自定义树" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdys">
            <JTreeSelect
              ref="treeSelect"
              placeholder="请选择自定义树"
              v-model:value="formState.zdys"
              dict="sys_category,name,id"
              pidValue="0"
              loadTriggleChange
            />
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="数值" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.yuanjia">
            <a-input-number v-model:value="formState.yuanjia" placeholder="请输入double类型" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="输入2到10位的字母" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.ywzz">
            <a-input v-model:value="formState.ywzz" placeholder="请输入2到10位的字母" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="JTreeDict" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdbxl">
            <JTreeDict v-model:value="formState.zdbxl" placeholder="请选择JTreeDict" @change="(value) => handleFormChange('zdbxl', value)" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="MyCodeEditor" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.zdmrz">
            <MyCodeEditor v-model:value="formState.zdmrz" placeholder="请输入MyCodeEditor" @change="(value) => handleFormChange('zdmrz', value)" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="参数" :labelCol="labelCol" :wrapperCol="wrapperCol" v-bind="validateInfos.jsonParam">
            <JAddInput v-model:value="formState.jsonParam" placeholder="参数" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from "vue"
  import { defHttp } from "/@/utils/http/axios"
  import { useMessage } from "/@/hooks/web/useMessage"
  import dayjs from "dayjs"
  import { TimePicker, Form } from "ant-design-vue"
  import MyCheckbox from "/@/components/Form/src/components/MyCheckbox.vue"
  import MyImageUpload from "/@/components/My/Upload/MyImageUpload.vue"

  import JDictSelectTag from "/@/components/Form/src/jeecg/components/JDictSelectTag.vue"
  import JSwitch from "/@/components/Form/src/jeecg/components/JSwitch.vue"
  import JUpload from "/@/components/Form/src/jeecg/components/JUpload/JUpload.vue"
  import JSearchSelect from "/@/components/Form/src/jeecg/components/JSearchSelect.vue"
  import JPopup from "/@/components/Form/src/jeecg/components/JPopup.vue"
  import JCategorySelect from "/@/components/Form/src/jeecg/components/JCategorySelect.vue"
  import JSelectUserByDept from "/@/components/Form/src/jeecg/components/JSelectUserByDept.vue"
  // import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
  import JMarkdownEditor from "/@/components/Form/src/jeecg/components/JMarkdownEditor.vue"
  import JTreeSelect from "/@/components/Form/src/jeecg/components/JTreeSelect.vue"
  import JInputPop from "/@/components/Form/src/jeecg/components/JInputPop.vue"
  import JSelectInput from "/@/components/Form/src/jeecg/components/JSelectInput.vue"
  import JSelectPosition from "/@/components/Form/src/jeecg/components/JSelectPosition.vue"
  import JSelectMultiple from "/@/components/Form/src/jeecg/components/JSelectMultiple.vue"
  import JInput from "/@/components/Form/src/jeecg/components/JInput.vue"
  import MySelectDept from "/@/components/Form/src/components/MySelectDept.vue"
  import JSelectUser from "/@/components/Form/src/jeecg/components/JSelectUser.vue"
  import JAreaSelect from "/@/components/Form/src/jeecg/components/JAreaSelect.vue"
  import JAreaLinkage from "/@/components/Form/src/jeecg/components/JAreaLinkage.vue"
  import JSelectRole from "/@/components/Form/src/jeecg/components/JSelectRole.vue"
  import JTreeDict from "/@/components/Form/src/jeecg/components/JTreeDict.vue"
  import JAddInput from "/@/components/Form/src/jeecg/components/JAddInput.vue"
  import { getValueType } from "/@/utils"

  const emit = defineEmits(["register", "ok"])
  // 报表示例验证修改
  const formState = reactive<Record<string, any>>({
    name: "",
    miMa: "",
    ywzz: "",
    xiala: "",
    danxuan: "",
    duoxuan: "",
    riqi: "",
    shijian: "",
    wenjian: "",
    tupian: "",
    dhwb: "",
    xlss: "",
    popup: "",
    flzds: "",
    yhxz: "",
    fwb: "",
    shq: "",
    ldzje: "",
    ldzjs: "",
    zddtjxl: "",
    yongHu: "",
    zhiWu: "",
    jueSe: "",
    zdys: "",
    jssq: "",
    zdbxl: "",
    zdmrz: "",
    jsonParam: "",
    bmxz: "",
    yuanjia: "",
    nyrsfm: "",
  })

  const { createMessage } = useMessage()
  const formRef = ref()
  const useForm = Form.useForm
  const url = reactive<any>({
    duplicateCheck: "/sys/duplicate/check",
    add: "/test/jeecgDemo/oneNative/add",
    edit: "/test/jeecgDemo/oneNative/edit",
  })
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } })
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } })
  const confirmLoading = ref<boolean>(false)
  //表单验证
  const validatorRules = {
    name: [{ required: false, message: "请输入文本!" }],
    miMa: [{ required: false, message: "请输入密码!" }],
    ywzz: [{ required: false }, { pattern: "^[a-z|A-Z]{2,10}$", message: "不符合校验规则!" }],
    xiala: [{ required: false, message: "请选择下拉组件!" }],
    danxuan: [{ required: false, message: "请选择单选组件!" }],
    duoxuan: [{ required: false, message: "请选择多选组件!" }],
    riqi: [{ required: false, message: "请选择日期!" }],
    shijian: [{ required: false, message: "请选择时间!" }],
    wenjian: [{ required: false, message: "请上传文件!" }],
    tupian: [{ required: false, message: "请上传图片!" }],
    dhwb: [{ required: false, message: "请填写多行文本!" }],
    xlss: [{ required: false, message: "请选择字典下拉搜索!" }],
    popup: [{ required: false, message: "请选择popup弹窗!" }],
    flzds: [{ required: false, message: "请选择分类字典树!" }],
    yhxz: [{ required: false, message: "请选择用户!" }],
    fwb: [{ required: false, message: "请填写富文本!" }],
    shq: [{ required: false, message: "请选择省市级!" }],
    ldzje: [{ required: false, message: "请输入JInputPop!" }],
    ldzjs: [{ required: false, message: "请选择下拉输入框!" }],
    zddtjxl: [{ required: false, message: "请选择多选输入框!" }],
    yongHu: [{ required: false, message: "请选择用户!" }],
    zhiWu: [{ required: false, message: "请选择职务!" }],
    jueSe: [{ required: false, message: "请选择角色!" }],
    zdys: [{ required: false, message: "请选择自定义树!" }],
    jssq: [{ required: false, message: "请选择三级联动!" }],
    zdbxl: [{ required: false, message: "请选择JTreeDict!" }],
    zdmrz: [{ required: false, message: "请输入MyCodeEditor!" }],
    jsonParam: [{ required: false, message: "请输入参数!" }],
    bmxz: [{ required: false, message: "请选择部门!" }],
    yuanjia: [{ required: false, message: "请输入数值!" }],
    nyrsfm: [{ required: false, message: "请选择年月日时分秒!" }],
  }
  // 报表示例验证修改
  const { resetFields, validate, validateInfos } = useForm(formState, validatorRules, { immediate: false })
  const ldzjsOptions = ref([
    { label: "男", value: "1" },
    { label: "女", value: "2" },
  ])

  /**
   * 新增
   */
  function add() {
    edit({})
  }

  /**
   * 编辑
   */
  function edit(record) {
    nextTick(() => {
      resetFields()
      //赋值
      Object.assign(formState, record)
    })
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    // 触发表单验证
    await validate()
    confirmLoading.value = true
    let httpurl = ""
    let method = ""
    //时间格式化
    let model = formState
    if (!model.id) {
      httpurl += url.add
      method = "post"
    } else {
      httpurl += url.edit
      method = "put"
    }
    //循环数据如果是数组
    for (let data in formState) {
      //如果该数据是数组并且是字符串类型
      if (formState[data] instanceof Array) {
        let valueType = getValueType(formRef.value.getProps, data)
        //如果是字符串类型的需要变成以逗号分割的字符串
        if (valueType === "string") {
          formState[data] = formState[data].join(",")
        }
      }
    }
    defHttp
      .request(
        {
          url: httpurl,
          params: model,
          method: method,
        },
        { isTransformResponse: false }
      )
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message)
          emit("ok")
        } else {
          createMessage.warning(res.message)
        }
      })
      .finally(() => {
        confirmLoading.value = false
      })
  }

  /**
   * popup成功回调事件
   */
  function popupHandleSuccess(values) {
    Object.assign(formState, values)
  }

  /**
   *  popup组件值改变事件
   */
  function setFieldsValue(map) {
    Object.keys(map).map((key) => {
      formState[key] = map[key]
    })
  }

  /**
   * 值改变事件触发
   * @param key
   * @param value
   */
  function handleFormChange(key, value) {
    formState[key] = value
  }

  defineExpose({
    add,
    edit,
    submitForm,
  })
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 24px 24px 24px 24px;
  }
</style>
